<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增关于图片</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/js/layui/css/layui.css" media="all">
    <style>

    </style>
</head>
<body style="height: 100%">
<div style="width:80%;height:100%;margin:15px auto;background-color: white;padding: 20px">
    <div style="width:100%;height:100%;margin:15px auto;text-align: center" class="layui-btn-group" id="btngroup">
        <button type="button" id="btnchina" class="layui-btn" onclick="clickbtn(0)">中文</button>
        <button type="button" id="btnenglish" class="layui-btn layui-btn-primary" onclick="clickbtn(1)">英语</button>
        <!--    泰语-->
        <button type="button" id="btnlaowo" class="layui-btn layui-btn-primary" onclick="clickbtn(2)">泰语</button>
        <button type="button" id="btnjianpuzhai" class="layui-btn layui-btn-primary" onclick="clickbtn(3)">柬埔寨</button>
    </div>
    <form class="layui-form" action="">
        <div id="tupian_zh">
                <div style="text-align: center">
                    <h1>品牌故事图片-中文</h1>
                </div>
                <!-- 图片上传 -->
                <div class="layui-upload" style="text-align: center">
                    <button type="button" class="layui-btn" id="test1" style="" >上传图片</button>
                    <div class="layui-upload-list" style="display: inline;margin-left: 20px;">
                        <img class="layui-upload-img" name="guanyu" id="guanyu1" style="max-width: 400px" src="/image/no.jpg">
                    </div>
                    <span style="color: red;display: inline-block">建议图片宽度600px以上</span>
                    <input type="hidden" class="input-text" id="picture" name="picture">
                </div>

                <div class="layui-form-item" style="margin-top: 20px;text-align: center">
                    <div class="layui-input-block" id="addBtn" style="margin: 0px">
                        <button class="layui-btn" id="addWuye" lay-submit lay-filter="addWuye">立即添加</button>
                    </div>
                    <div class="layui-input-block" id="updateBtn" style="display: none;margin: 0px">
                        <button class="layui-btn" id="update" lay-submit lay-filter="update">确认修改</button>
                    </div>
                </div>
        </div>
        <div id="tupian_en" style="display: none">
                <div style="text-align: center">
                    <h1>品牌故事图片-英语</h1>
                </div>
                <!-- 图片上传 -->
                <div class="layui-upload" style="text-align: center">
                    <button type="button" class="layui-btn" id="test2" style="" >上传图片</button>
                    <div class="layui-upload-list" style="display: inline;margin-left: 20px;">
                        <img class="layui-upload-img" name="guanyu" id="guanyu2" style="max-width: 400px" src="/image/no.jpg">
                    </div>
                    <span style="color: red;display: inline-block">建议图片宽度600px以上</span>
                    <input type="hidden" class="input-text" id="picture_en" name="picture_en">
                </div>

                <div class="layui-form-item" style="margin-top: 20px;text-align: center">
                    <div class="layui-input-block" id="addBtn2" style="margin: 0px">
                        <button class="layui-btn" id="addWuye2" lay-submit lay-filter="addWuye">立即添加</button>
                    </div>
                    <div class="layui-input-block" id="updateBtn2" style="display: none;margin: 0px">
                        <button class="layui-btn" id="update2" lay-submit lay-filter="update">确认修改</button>
                    </div>
                </div>
        </div>
        <div id="tupian_th" style="display: none">

                <div style="text-align: center">
                    <h1>品牌故事图片-泰语</h1>
                </div>
                <!-- 图片上传 -->
                <div class="layui-upload" style="text-align: center">
                    <button type="button" class="layui-btn" id="test3" style="" >上传图片</button>
                    <div class="layui-upload-list" style="display: inline;margin-left: 20px;">
                        <img class="layui-upload-img" name="guanyu" id="guanyu3" style="max-width: 400px" src="/image/no.jpg">
                    </div>
                    <span style="color: red;display: inline-block">建议图片宽度600px以上</span>
                    <input type="hidden" class="input-text" id="picture_th" name="picture_th">
                </div>

                <div class="layui-form-item" style="margin-top: 20px;text-align: center">
                    <div class="layui-input-block" id="addBtn3" style="margin: 0px">
                        <button class="layui-btn" id="addWuye3" lay-submit lay-filter="addWuye">立即添加</button>
                    </div>
                    <div class="layui-input-block" id="updateBtn3" style="display: none;margin: 0px">
                        <button class="layui-btn" id="update3" lay-submit lay-filter="update">确认修改</button>
                    </div>
                </div>
        </div>
        <div id="tupian_kh" style="display: none">

            <div style="text-align: center">
                <h1>品牌故事图片-柬埔寨</h1>
            </div>
            <!-- 图片上传 -->
            <div class="layui-upload" style="text-align: center">
                <button type="button" class="layui-btn" id="test4" style="" >上传图片</button>
                <div class="layui-upload-list" style="display: inline;margin-left: 20px;">
                    <img class="layui-upload-img" name="guanyu" id="guanyu4" style="max-width: 400px" src="/image/no.jpg">
                </div>
                <span style="color: red;display: inline-block">建议图片宽度600px以上</span>
                <input type="hidden" class="input-text" id="picture_kh" name="picture_kh">
            </div>

            <div class="layui-form-item" style="margin-top: 20px;text-align: center">
                <div class="layui-input-block" id="addBtn4" style="margin: 0px">
                    <button class="layui-btn" id="addWuye4" lay-submit lay-filter="addWuye">立即添加</button>
                </div>
                <div class="layui-input-block" id="updateBtn4" style="display: none;margin: 0px">
                    <button class="layui-btn" id="update4" lay-submit lay-filter="update">确认修改</button>
                </div>
            </div>
        </div>
    </form>
</div>
</body>
<script src="/js/layui/layui.js"></script>
<script src="/js/layui/layui.all.js"></script>
<script src="/admin/js/token.js"></script>
<script>
    var $ = layui.jquery;
    var layer = layui.layer;
    var isExit = 0;//判断是否已有图片

    window.onload = function(){
        layer.load(2);
        $.ajax({
            url:"/guanyu/getGuanyu",
            type:'get',
            sync:true,
            success:function (result) {
                if (result.code==200){
                    isExit=1;
                    $("#addBtn").hide();
                    $("#updateBtn").show();
                    $("#addBtn2").hide();
                    $("#updateBtn2").show();
                    $("#addBtn3").hide();
                    $("#updateBtn3").show();
                    $("#addBtn4").hide();
                    $("#updateBtn4").show();
                    $("#picture").val(result.data.picture);
                    $("#picture_en").val(result.data.picture_en);
                    $("#picture_th").val(result.data.picture_th);
                    $("#picture_kh").val(result.data.picture_kh);
                    $("#guanyu1").attr("src",result.data.picture);
                    $("#guanyu2").attr("src",result.data.picture_en);
                    $("#guanyu3").attr("src",result.data.picture_th);
                    $("#guanyu4").attr("src",result.data.picture_kh);
                }else if (isExit==0){
                    isExit=0;
                    $("#addBtn").show();
                    $("#updateBtn").hide();
                    $("#addBtn2").show();
                    $("#updateBtn2").hide();
                    $("#addBtn3").show();
                    $("#updateBtn3").hide();
                    $("#addBtn4").show();
                    $("#updateBtn4").hide();
                }
                layer.closeAll();
            }
        })
    }

    layui.use(['form' , 'jquery' , 'upload'], function() {
        var form = layui.form;

        var upload = layui.upload;

        //新增
        form.on('submit(addWuye)',function(data){
            console.log(isExit);
            if (isExit==0){
                if (data.field.picture.length==0){
                    layer.msg("请先上中文图片",{icon:2,time:1500});
                    return false;
                }
                if (data.field.picture_en.length==0){
                    layer.msg("请先上传英文图片",{icon:2,time:1500});
                    return false;
                }
                if (data.field.picture_th.length==0){
                    layer.msg("请先上传泰语图片",{icon:2,time:1500});
                    return false;
                }
                if (data.field.picture_kh.length==0){
                    layer.msg("请先上传柬埔寨图片",{icon:2,time:1500});
                    return false;
                }
                layer.load();
                $.ajax({
                    url:'/guanyu/addGunayu',
                    type:'POST',
                    contentType: 'application/json',
                    data:JSON.stringify(data.field),
                    success:function (result) {
                        if(result.code==200){
                            layer.msg("新增成功");
                            setTimeout(function () {
                                location.reload();
                            },2000);
                        }else {
                            layer.msg(result.msg,{icon:2,time:1500});
                        }
                    }
                });
                layer.closeAll();
            }
            return false;
        })

        //修改
        form.on('submit(update)',function(data){
            if (isExit==1){
                console.log(data.field);
                if (data.field.picture.length==0){
                    layer.msg("请先上中文图片",{icon:2,time:1500});
                    return false;
                }
                if (data.field.picture_en.length==0){
                    layer.msg("请先上传英文图片",{icon:2,time:1500});
                    return false;
                }
                if (data.field.picture_th.length==0){
                    layer.msg("请先上传泰语图片",{icon:2,time:1500});
                    return false;
                }
                if (data.field.picture_kh.length==0){
                    layer.msg("请先上传柬埔寨图片",{icon:2,time:1500});
                    return false;
                }
                layer.load();
                $.ajax({
                    url:'/guanyu/update',
                    type:'POST',
                    data:{picture:data.field.picture,picture_en:data.field.picture_en,picture_th:data.field.picture_th,picture_kh:data.field.picture_kh},
                    success:function (result) {
                        if(result.code==200){
                            layer.msg("修改成功");
                            setTimeout(function () {
                                location.reload();
                            },2000);
                        }else {
                            layer.msg(result.msg,{icon:2,time:1500});
                        }
                    }
                });
                layer.closeAll();
            }
            return false;
        })

        //bg上传
        function uploadtupian(i) {
            var uploadInst = upload.render({
                elem: '#test'+i
                , url: '/admin/upload/uploadimg' //改成您自己的上传接口
                , before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result){
                        if(i==1){
                            $('#guanyu1').attr('src', result); //图片链接（base64）
                        }else if(i==2){
                            $('#guanyu2').attr('src', result); //图片链接（base64）
                        }else if(i==3){
                            $('#guanyu3').attr('src', result); //图片链接（base64）
                        }else if (i==4){
                            $("#guanyu4").attr('src', result);
                        }

                    });
                }
                , done: function (res) {
                    //判断上传是否成功
                    if (res.code == 0) {
                        if(i==1){
                            $("#picture").val(res.data);
                        }else if(i==2){
                            $("#picture_en").val(res.data);
                        }else if(i==3){
                            $("#picture_th").val(res.data);
                        }else if (i==4){
                            $("#picture_kh").val(res.data);
                        }
                        return layer.msg('上传成功！');
                    }else{
                        return layer.msg('上传失败！');
                    }
                }
                , error: function () {
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function () {
                        uploadInst.upload();
                    });
                }
            });
        }
        for (var i = 1; i <= 4; i++) {
           uploadtupian(i);
        }

    });

    function clickbtn(index) {
        var btns=$("#btngroup").find("button");
        if(index==0){
            $("#tupian_zh").css("display","block");
            $("#tupian_en").css("display","none");
            $("#tupian_th").css("display","none");
            $("#tupian_kh").css("display","none");
        } else if(index==1){
            $("#tupian_zh").css("display","none");
            $("#tupian_en").css("display","block");
            $("#tupian_th").css("display","none");
            $("#tupian_kh").css("display","none");
        }else if(index==2){
            $("#tupian_zh").css("display","none");
            $("#tupian_en").css("display","none");
            $("#tupian_th").css("display","block");
            $("#tupian_kh").css("display","none");
        }else if (index==3){
            $("#tupian_zh").css("display","none");
            $("#tupian_en").css("display","none");
            $("#tupian_th").css("display","none");
            $("#tupian_kh").css("display","block");
        }
        for(let i=0;i<btns.length;i++){
            if(i==index){
                btns[i].setAttribute("class","layui-btn");
                continue;
            }
            btns[i].setAttribute("class","layui-btn layui-btn-primary");
        }
    }


</script>
</html>